import React, { memo, useState, useEffect } from 'react';
import { useSelector } from 'react-redux'
import { getHot } from './api';
import './index.css';

export default memo(function Hot() {

  const [hotList, setHotList] = useState([]);

  const hotresourceStore = useSelector(state => state.hotresource)

  useEffect(() => {
    getHot(hotresourceStore).then(res => {
      setHotList(res?.data?.list);
    });
  }, [hotresourceStore]);
  const ItemClick = item => {
    const { ipcRenderer } = window.require('electron');
    ipcRenderer.send(
      'openBrowser',
      item.url ? item.url : 'https://www.douyin.com/'
    );
  };
  return (
    <div className='wrap'>
      <span>
        {hotresourceStore === '/resou'
          ? '微博'
          : hotresourceStore === '/douyinresou'
          ? '抖音'
          : hotresourceStore === '/zhihuresou'
          ? '知乎'
          : ''}
        热搜榜
      </span>
      <div className='content'>
        {hotList?.slice(0, 8).map((item, index) => {
          return (
            <div className='item' key={index} onClick={e => ItemClick(item)}>
              <span className='index'>{index + 1}</span>
              <span className='title'>{item?.name}</span>
              <span className='hot'>{item?.hot}</span>
            </div>
          );
        })}
      </div>
      {hotList.length === 0 && (
        <img
          style={{ marginLeft: '30%' }}
          src={require('../../assets/img/暂无消息.png')}
          alt=''
        />
      )}
    </div>
  );
});
